<template>
	<view class="message-container">
		<view class="header">
			<text class="title">消息</text>
		</view>
		
		<view class="message-list">
			<view 
				class="message-item" 
				v-for="(message, index) in messageList" 
				:key="index"
				@click="readMessage(message)"
			>
				<view class="message-avatar">
					<text class="avatar-icon">{{ message.avatar }}</text>
				</view>
				<view class="message-content">
					<text class="sender-name">{{ message.senderName }}</text>
					<text class="message-text">{{ message.content }}</text>
					<text class="message-time">{{ message.time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const messageList = ref([
	{
		id: 1,
		senderName: '系统通知',
		content: '欢迎加入道家文化社区',
		time: '30分钟前',
		avatar: '🔔'
	},
	{
		id: 2,
		senderName: '道友张三',
		content: '您的评论收到了回复',
		time: '2小时前',
		avatar: '👤'
	}
])

const readMessage = (message) => {
	uni.showToast({
		title: '消息详情页开发中',
		icon: 'none'
	})
}

onMounted(() => {
	console.log('消息页面已挂载')
})
</script>

<style scoped>
.message-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20rpx;
}

.header {
	padding: 40rpx 0;
	text-align: center;
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
}

.message-list {
	padding: 20rpx;
}

.message-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.message-avatar {
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.avatar-icon {
	font-size: 32rpx;
}

.message-content {
	flex: 1;
}

.sender-name {
	display: block;
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.message-text {
	display: block;
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 10rpx;
}

.message-time {
	font-size: 24rpx;
	color: #999999;
}
</style>
